﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>adv-webapp-shortcuts demo page</title>
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<meta name="robots" content="index, follow" />
		<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" href="styles/lib/basis.reset.css" type="text/css" />
		<link rel="stylesheet" href="styles/lib/basis.typography.css" type="text/css" />
		<link rel="stylesheet" href="../lib/themes/default/ui.css" type="text/css" />
		<link rel="stylesheet" href="styles/general.css" type="text/css" />
		<script src="scripts/lib/jquery-1.4.min.js" type="text/javascript"></script>
		<script src="../lib/scripts/core.js" type="text/javascript"></script>
		<script src="../lib/scripts/observer.js" type="text/javascript"></script>
		<script src="../lib/scripts/walker.js" type="text/javascript"></script>
		<script src="../lib/scripts/keygrabber.js" type="text/javascript"></script>
		<script src="../lib/scripts/ui.js" type="text/javascript"></script>
		<script src="scripts/general.js" type="text/javascript"></script>
		<script src="scripts/pathes.js" type="text/javascript"></script>
	</head>
	<body>
		
		<div id="wrapper">
			<h1>adv-webapp-shortcuts demo page</h1>
			<h2>Quick demonstration</h2>
			<p>Press "d", "a", "b", write "example". You should see panel in top of page. If not, make sure page have focus and your input is in english. Press "Enter" to execute binded function.</p>
			<h2>Details</h2>
			<p><em>Purpose of this demo is to show you how adv-webapp-shortcuts works, not to impress with other cool scripts or ideas. So don't let those simple alerts and primitive actions upset you.
			You can and should define you own shortcuts and actions.</em></p>
			<p>There are 2 pathes defined in this demo, listed below. To step into path, press indicated key.</p>
			<p>UI should show up, telling you what will happen if you press "Enter" (text next to ↳ symbol).</p>
			<p>If there are nested waypoints, UI will display list of them (text next to → symbol) with indication of key you may press to move to one of them.</p>
			<p>Press "Backspace" to change inputted string, return to previous step/waypoint or step out from selected path.</p>
			<p><em>Make sure input language is set to english.</em></p>
			<h2>Available pathes</h2>
			<ul>
				<li>"i" - the simplest one. Contains only one root waypoint. Displays some basic info about this page.</li>
				<li>"d" is more comprex. Contains nested waypoins: regular ones and some of special type. 
				The latest allows to enter custom string, which can be passed to binded function. Press "dap" of "dab" and input some text. This text will be inserted in new paragraph or blockquote.</li>
			</ul>
		</div>
		
		<div id="demo-text-container"></div>
		
	</body>
</html>